<!DOCTYPE html>
<html lang="fr">

<!-- en-tête -->
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
	<title>Client Rest</title>

	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/>
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet"/>
	<link href="css/styles.css" rel="stylesheet"/>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<script type="text/javascript" src="js/rest-client.js"></script>
	<script type="text/javascript">
	restClient.getBook();
	</script>
	 <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/charts.js"></script>
</head>
<!-- fin en-tête -->

<div class="container-fluid">
<div class="row-fluid">
<div class="span12">

<body>
<!-- barre du haut -->
<header>
	<div class="row-fluid">
	<div class="span12">
		<div class="navbar navbar-inverse">
		    <div class="navbar-inner">
		      	<div class="container">

					<a class="brand" href="https://www.labri.fr/perso/bromberg/cours/MIAGE/M1/XML/Cours/ProjetXML.pdf" target="_blank"><img src="./img/mix-logo.png">Projet Web Services</a>
						<ul class="nav pull-right">
							<div class="dropdown container pull-right">
							<a href="#" class="dropdown-toggle pull-right connexion brand" data-toggle="dropdown"><img src="./img/onoff.png" alt="Connexion"><b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li>
								  	<p align="center"><img src="./img/google-drive.png" alt="Connexion à Google Drive"></p>
								  		<form class="form-inline" id="drive-connect">
										   	<p align="center"><input type="button" class="btn" onClick="javascript:connectDrive();" value="Se connecter"  /></p>
										</form>
								</li>
								<li class="divider"></li>
								<li>
									<p align="center"><img src="./img/dropbox.png" alt="Connexion à Dropbox"></p>
										<form class="form-inline" id="dropbox-connect">
											<p align="center"><input type="button" class="btn" onClick="javascript:connectDropbox();" value="Se connecter"  /></p>
										</form>
								</li>
			                </ul><!-- dropdown-menu-->
			            	</div><!-- dropdown container pull-right-->
						</ul><!-- nav pull-right-->
				</div><!--container-->
			</div><!--navbar-inner-->
		</div>
	</div>
	</div>
</header>
<!-- barre du haut -->


<!-- grid 3 / 9 -->

<div class="row-fluid">
	  <div class="span12">
		<!-- include du menu de droite -->
		<div id="sidebar" class="span3">
	        <div class="well sidebar-nav">
	        	<ul class="nav nav-list">
			        <li class="nav-header">Vos actions possibles</li>
			        <li>
			        	<div class="modal hide" id="infos">
						<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
						<h3>Ajouter un document</h3>
						</div>
						<div class="modal-body">
						<p>Choisissez l'espace de stockage auquel vous voulez ajouter votre fichier:</p>
						<!-- fenetre modal choix de l'espace-->
							<label class="checkbox inline">
							<input type="checkbox" id="inlineCheckbox1" value="option1"> Google Drive
							</label>
							<label class="checkbox inline">
							<input type="checkbox" id="inlineCheckbox2" value="option2"> Dropbox
							</label>
							    <button type="submit" class="btn">Valider</button>
						</div>
						</div>
				        <a data-toggle="modal" href="#infos"><i class="icon-plus"></i>Ajouter un fichier</a>
			        </li>
			        <li>
			        	<a href="#"><i class="icon-trash"></i>Supprimer un fichier</a>
			        </li>
			        <li>
			        	<a href="#"><i class="icon-arrow-up"></i>Upload</a>
			        </li>
			        <li>
			        	<a href="#" onClick="javascript:updateFilesDropbox('');"><i class="icon-refresh"></i>Actualiser les fichiers</a>
			        </li>
			    </ul>
			</div><!-- well sidebar-nav -->
			
		<p align="center"><img src="./img/logo_miage.png"></p>
		</div><!-- sidebar -->

		<div class="span9">
		 	<h1 align="center">Vos espaces fusionnés</h1>
		 	<div class="container-fluid incrustation">
		 	<table class="table table-striped table-condensed table-bordered" id="files_table">
			</table>
		</div>
	</div><!-- sidebar -->
	</div> <!-- span12 -->
</div> <!-- row-fluid -->


<div class="row-fluid">
		<div class="span12">
			<div class="span3 sidefooter">
			        	<ul class="nav nav-list creators" align="left">
					        <li class="nav-header"><u>Projet réalisé par:</u></li>
					        <li>
						    	<i class="icon-user"></i>Baudrais Maxime</a>
					        </li>
					        <li>
					        	<i class="icon-user"></i>Duverger Marion</a>
					        </li>
					        <li>
					        	<i class="icon-user"></i>Rassat Anthony</a>
					        </li>
					        <li>
					        	<i class="icon-user"></i>Villegente Sonia</a>
					        </li>
					    </ul>
			</div><!-- sidebar -->

			<div class="span9 graph_content" align="center">
				<p align="left" class="nav-header">Etat d'occupation des espaces de stockage</p>
				<div class="span4"><div id="chart_div_google" align="center"></div></div>
				<div class="span1"></div>
				<div class="span4"><div id="chart_div_dropbox" align="center"></div></div>
			</div>
		</div><!-- span12 -->
</div><!-- row-fluid -->


</div><!-- span12 -->
</div><!-- row-fluid -->
</div><!-- container-fluid -->

</body>

</html>

<!-- THE E.N.D. -->
